<template>
  <div class="box">
    <h1>setup函数的使用</h1>
    <h4>我的名字是：{{ name }}</h4>
    <button @click="changeName">修改名字</button>
    <button @click="toParent">子传父</button>
  </div>
</template>

<script>
import {h} from "vue"
export default {
    //setup函数
    setup(props,context){
        //1.执行顺序：它是在props、data、computed、methods 、生命周期等函数之前运行的。
        console.log("setup函数调用");

        //2.没有this,vue实例到现在还没有创建呢
        console.log(this); //undefined

        //3.有两个参数props,context
        //参数1：props父传子的数据，props有值，一定是父组件传了值，子组件收了
        console.log(props); //Proxy {msg: '我是来自父组件的数据', data: '10'}

        //参数2：context：对象上下文环境，代替当前组件的this,他下面的emit用于子传父
        console.log(context);


        //4.setup中定义组件所需的数据，不是响应式的，必须return模块中才可以使用
        let name = "侯俊冲";

        //定义函数
        function changeName(){
          name = "王延冲"; //数据不是响应式，数据发生了变化，但是视图不会跟着改变
          console.log("名字改了--",name);
        }
        function toParent(){
          //setup函数中没有this,使用context代替this的功能  子传父
          context.emit("toParent","我是子组件");
        }

        //5.返回定义好的数据和方法 对象形式 {}
        // return {
        //   name,
        //   changeName,
        //   toParent
        // }

        return () => h("h3", "这是用h函数渲染的视图");

    },
    beforeCreate(){
        console.log("创建之前");
    },
    props:["msg","data"]
}
</script>

<style>

</style>